<template>
  <div>
    <el-select v-model="selectedField" placeholder="选择字段">
      <el-option v-for="field in fields" :key="field.value" :label="field.label" :value="field.value"></el-option>
    </el-select>
    
    <el-select v-model="selectedOperator" placeholder="选择操作符">
      <el-option v-for="operator in operators" :key="operator.value" :label="operator.label" :value="operator.value"></el-option>
    </el-select>

      <el-select v-model="selectedOperator" placeholder="选择拼接条件">
      <el-option v-for="operator in operators" :key="operator.value" :label="operator.label" :value="operator.value"></el-option>
    </el-select>
    
    <el-input v-model="value" placeholder="输入值"></el-input>
    
    <el-button @click="addCondition">添加条件</el-button>
    
    <div v-for="(condition, index) in conditions" :key="index">
      <span>{{ condition.field }}</span>
      <span>{{ condition.operator }}</span>
      <span>{{ condition.value }}</span>
    </div>
    
    <el-button @click="generateSQL">生成SQL</el-button>
    
    <div v-if="generatedSQL">{{ generatedSQL }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedField: '',
      selectedOperator: '',
      value: '',
      conditions: [],
      generatedSQL: ''
    };
  },
  computed: {
    fields() {
      // 返回可供选择的字段列表，可以从后端接口获取
      return [
        { value: 'field1', label: '字段1' },
        { value: 'field2', label: '字段2' },
        { value: 'field3', label: '字段3' }
      ];
    },
    operators() {
      // 返回可供选择的操作符列表
      return [
        { value: '=', label: '等于' },
        { value: '>', label: '大于' },
        { value: '<', label: '小于' }
      ];
    }
  },
  methods: {
    addCondition() {
      // 添加条件到条件列表
      this.conditions.push({
        field: this.selectedField,
        operator: this.selectedOperator,
        value: this.value
      });
      
      // 清空输入框
      this.selectedField = '';
      this.selectedOperator = '';
      this.value = '';
    },
    generateSQL() {
      // 构建 SQL 语句
      let sql = 'SELECT * FROM table_name WHERE ';
      
      for (let condition of this.conditions) {
        sql += `${condition.field} ${condition.operator} '${condition.value}' AND `;
      }
      
      // 去除最后的多余字符
      sql = sql.slice(0, -5);
      
      // 更新生成的 SQL
      this.generatedSQL = sql;
    }
  }
};
</script>
